<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    :destroyOnClose="true"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item label="上级区域" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-mentions v-decorator="['name']"  readonly>
          </a-mentions>
        </a-form-item>
        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number v-decorator="['sort',{rules:[{required:true,message:'排序!!'}]}]" placeholder="请输入排序" style="width: 100%"/>
        </a-form-item>
<!--        <a-form-item label="是否是叶子节点" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--          <a-input-number v-decorator="['isLeaf']" placeholder="请输入是否是叶子节点" style="width: 100%"/>-->
<!--        </a-form-item>-->
        <a-form-item label="区域名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['name',{rules:[{required:true,message:'区域名称!!!'}]}]" placeholder="请输入区域名称"></a-input>
        </a-form-item>
        <a-form-item label="地图编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['mapCode']" placeholder="请输入地图编码"></a-input>
        </a-form-item>
        <a-form-item label="坐标(所在位置)" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea v-decorator="['atLocation']" rows="4" placeholder="请输入坐标(所在位置)"/>
        </a-form-item>
        <a-form-item label="联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['phone']" placeholder="请输入联系电话"></a-input>
        </a-form-item>
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea v-decorator="['description']" rows="4" placeholder="请输入备注"></a-textarea>
        </a-form-item>



        <a-form-item label="平面图" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-image-upload isMultiple  v-decorator="['imgUrl']" ></j-image-upload>
        </a-form-item>
<!--        <template>-->
<!--          <div class="clearfix">-->
<!--            <a-form-item  label="平面图地址" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--            <a-upload-->
<!--              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
<!--              list-type="picture-card"-->
<!--              :file-list="fileList"-->
<!--              @preview="handlePreview"-->
<!--              @change="handleChange"-->
<!--            >-->
<!--              <div v-if="fileList.length < 8">-->
<!--                <a-icon type="plus" />-->
<!--                <div class="ant-upload-text">-->
<!--                  Upload-->
<!--                </div>-->
<!--              </div>-->
<!--            </a-upload>-->
<!--            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancels">-->
<!--              <img alt="example" style="width: 100%" :src="previewImage" v-decorator="['imgUrl']"/>-->
<!--            </a-modal>-->
<!--            </a-form-item>-->
<!--          </div>-->
<!--        </template>-->

        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group button-style="solid" v-decorator="['status']">
            <a-radio-button :value="1">正常</a-radio-button>
            <a-radio-button :value="0">错误</a-radio-button>
          </a-radio-group>
        </a-form-item>
<!--        <a-form-item label="父级节点" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--          <a-input v-decorator="['pid']" placeholder="请输入父级节点"></a-input>-->
<!--        </a-form-item>-->
        
      </a-form>
    </a-spin>
  </j-modal>
</template>
<style scoped>
.leaflet{
  width: 100%;
  height: 600px;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
  left: 50.1%;
  top: 300px;
  transform: translate3d(-50%, -50%, 0);
  border: 1px solid #999;
}
.map {
  width: 100%;
  height: calc(100%);
  z-index: 1;
}
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
<script>

  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'  
  import JTreeSelect from '@/components/jeecg/JTreeSelect'
  import JImageUpload from '@/components/jeecg/JImageUpload'

  import L from "leaflet";
  import 'leaflet/dist/leaflet.css';
  import 'leaflet.pm';
  import 'leaflet.pm/dist/leaflet.pm.css';



  function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
  export default {
    name: "BsMapAreaModal",
    components: { 
      JDate,
      JTreeSelect,
      JImageUpload
    },
    data () {
      return {
        map:'',
        previewVisible: false,
        previewImage: '',
        fileList: [
          {
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: 'http://rea1aiaff.hn-bkt.clouddn.com/benbuzongtu.jpg',
          },
        ],
        form: this.$form.createForm(this),
        title:"操作",
        width:800,
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/regional/bsMapArea/add",
          edit: "/regional/bsMapArea/edit",
        },
        expandedRowKeys:[],
        pidField:"parentId"
     
      }
    },
    created () {
    },
    methods: {
      handleCancels() {
        this.previewVisible = false;
      },
      async handlePreview(file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
      handleChange({ fileList }) {
        this.fileList = fileList;
      },
      add(obj) {
        this.edit(obj);
      },
      edit(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'parentId', 'isLeaf', 'name', 'mapCode', 'phone', 'imgUrl', 'atLocation', 'description', 'sort', 'status', 'createTime', 'updateTime', 'pid'))
        })
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.id) {
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
              method = 'put';
            }
            let old_pid = this.model[this.pidField]
            let formData = Object.assign(this.model, values);
            let new_pid = this.model[this.pidField]
            console.log("表单提交数据", formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                this.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }

        })
      },
      handleCancel() {
        this.close()
      },
      popupCallback(row) {
        this.form.setFieldsValue(pick(row, 'parentId', 'isLeaf', 'name', 'mapCode', 'phone', 'imgUrl', 'atLocation', 'description', 'sort', 'status', 'createTime', 'updateTime', 'pid'))
      },
      submitSuccess(formData, flag) {
        if (!formData.id) {
          let treeData = this.$refs.treeSelect.getCurrTreeData()
          this.expandedRowKeys = []
          this.getExpandKeysByPid(formData[this.pidField], treeData, treeData)
          this.$emit('ok', formData, this.expandedRowKeys.reverse());
        } else {
          this.$emit('ok', formData, flag);
        }
      },
      getExpandKeysByPid(pid, arr, all) {
        if (pid && arr && arr.length > 0) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].key == pid) {
              this.expandedRowKeys.push(arr[i].key)
              this.getExpandKeysByPid(arr[i]['parentId'], all, all)
            } else {
              this.getExpandKeysByPid(pid, arr[i].children, all)
            }
          }
        }
      }
    }
  }
</script>